<template>
	<div class="books2">
		<div class="div1">
			<aside>
				<i class="el-icon-s-data"><span>商品一级类型</span></i>
				<button><router-link to="/admin/booklist1"><i class="el-icon-refresh-right"></i></router-link></button>
			</aside>
			<hr/>
		</div>
		<div class="div2">
			<el-table :data="fun" border style="width: 100%;">
				<el-table-column prop="id" label="一级类型ID"></el-table-column>
			    <el-table-column prop="prio" label="顺序"></el-table-column>
			    <el-table-column prop="name" label="一级类型名称"></el-table-column>
				<el-table-column fixed="right" label="操作">
					<template slot-scope="scope">
						<el-button type="primary" @click="go2add(scope.row.id)" plain>
							<i class="el-icon-plus"> 添加</i>
						</el-button>
					</template>
				</el-table-column>
				<el-table-column label="二级信息节点" width="700">
					<template slot-scope="props">
						 <div class="box">
							  <div class="box-name" v-for="item in props.row.list">
								  <span>{{item.prio}}</span>
								  <span>{{item.name}}</span>
								  <div>
									   <el-button type="primary" size="mini" @click="go2update(scope.row.id)" plain>
										<i class="el-icon-edit"> 修改</i>
									  </el-button>
									  <el-button type="primary"  size="mini" @click="remove(scope.row.id)" plain>
										<i class="el-icon-close"> 删除</i>
									  </el-button>
								  </div>
							  </div>
						  </div>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<el-dialog
		  title="类型信息"
		  :visible.sync="centerDialogVisible"
		  width="30%"
		  center>
		  <div style="font-weight: 700;">
			<p>父节点ID: {{us.id}}</p>
			<br>
			<p>父节点名: {{us.name}}</p> 
		  </div>
		  <hr>
		  <el-form ref="user" :model="user" label-width="100px">
			<el-form-item label="二级类型名称">
			  	<el-input v-model="user.name"></el-input>
			</el-form-item>
			<el-form-item label="显示顺序">
			  	<el-input v-model="user.prio"></el-input>
			</el-form-item>
			<el-button @click="add()">{{act}}</el-button>
		  </el-form>
		</el-dialog>
	</div>
</template>

<script>
export default {
	name:'Booklist2',
	data(){
		return{
			act:'',
			centerDialogVisible: false,
			type:[],
			value:[],
			childen:[],
			us:{},
			user:{}
			
		}
	},
	methods:{
		go2add(id){
			this.act='添加'
			this.centerDialogVisible =true;
			this.user={
				id:0,
				name:'',
				pid:id,
				prio:100
			};
			this.$get("/api/adm/type/findById/"+id).then((resp)=>{
				this.us =resp.data.data;
				console.log(this.us);
			})
		},
		add(){
			this.centerDialogVisible =false;
			this.value=[];
			this.$postkv("/api/adm/type/add",this.user).then((resp)=>{
				this.value =resp.data.data;
				console.log(this.user);
				
				this.$message({
					message:resp.data.msg,
					type:'success'
				})
				
			})
		},
		go2update(id){
			this.act='修改';
			this.centerDialogVisible =true;
			this.$get("/api/adm/type/findById/"+id).then((resp)=>{
				this.user =resp.data.data;
				console.log(this.user);
				this.$get("/api/adm/type/findById/"+this.user.pid).then((resp)=>{
					this.us =resp.data.data;
					console.log(this.us);
				})
			})
		},
		remove(id){
			this.$get("/api/adm/type/remove/"+id).then((resp)=>{
				resp.data.data;
				console.log(this.value);
				
				this.$message({
					message:resp.data.msg,
					type:'success'
				})
			})
		}
	},
	mounted(){
		this.$get("/api/adm/type/findAll2").then((resp)=>{
			this.type =resp.data.data;
			console.log(this.type);
		})
	},
	computed:{
		fun(){
			this.type.forEach((item)=>{
				if(item.pid==0){
					this.value.push({
						id:item.id,
						name:item.name,
						prio:item.prio
					})
				}
			})
			console.log(this.value);
			this.value.forEach((i)=>{
				let types2 =[];
				this.type.forEach((item)=>{
					if(item.pid==i.id && item.pid>0){
						types2.push({
							id:item.id,
							name:item.name,
							prio:item.prio
						})
					}
				})
				i.list=types2;
			})
			return this.value;
		}
	}
}
</script>

<style scoped>
a{
	color: white;
}
.books2{
	width: 78%;
	margin: 0 auto;
}
.books2 .div1{
	margin-top: 15px;
}
.books2 .div1 aside{
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.books2 .div1 aside span{
	margin-left: 8px;
}
.books2 .div1 aside button{
	width: 80px;
	line-height: 40px;
	border: none;
	color: white;
	background-color: #009688;
	margin-right: 2vw;
	font-size: 18px;
}
.books2 .div2{
	margin-top: 20px;
}
.books2 .div2 .el-table{
	
}
.books2 .div2 .el-table .el-table-column{
	width: 100%;
}
.div2 .box{
	width: 96%;
	margin: 0 auto;
}
.div2 .box-name{
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	margin-top: 10px;
	border-bottom: 1px solid lightgray;
}
</style>
